<html>
  <body>
	  <script type="text/javascript" src="js/wz_dragdrop.js"></script>
	  
	  <br>
	  <img src="img/chiaki.jpg" name="chiaki" width="250px" height="250px"></img>  
	  <img src="img/yonekura.jpg" name="yonekura" width="250px" height="250px"></img>
	
	<div id="target" style="position:absolute; top:300px; left:20px; width:600px; height:300px; border:1px solid"></div>


<form name="myForm">

      <table align="right">
        <tr>
          <td align="right">name = </td>
          <td><input name="NAME" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;x = </td>
          <td><input name="X" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;y = </td>
          <td><input name="Y" type="text" size="12"></td>
        </tr>
		<tr>
		<td align="right">div_name = </td>
          <td><input name="div_NAME" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;div_x = </td>
          <td><input name="div_X" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;div_y = </td>
          <td><input name="div_Y" type="text" size="12"></td>
		</tr>

      </table>
	  
  </form>


<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, TRANSPARENT, "chiaki", "yonekura");
//, "target"+NO_DRAG
// The following loop creates a copy for each of the two images,
// but hides that copy immediately while the page is still loading
for (var i = 0; i < 2; i++)
{
    dd.elements[i].copy();
    dd.elements[i].copies[0].hide();
}

// The following two functions override their empty namesakes predefined in wz_dragdrop.js.
// They are automatically invoked from wz_dragdrop.js when a drag operation starts
// and ends, respectively.

// Here we make the non-transparent 'placeholder' copy of the dragged image visible
// and move it to the place where the drag operation starts
function my_PickFunc()
{
    dd.obj.copies[0].moveTo(dd.obj.x, dd.obj.y);
    dd.obj.copies[0].show();
}

// Here we hide the 'placeholder' again
function my_DropFunc()
{
    dd.obj.copies[0].hide();

    // Write the name and coordinates of the dropped item into form inputs:
    document.myForm.NAME.value = dd.obj.name;
    document.myForm.X.value = dd.obj.x;
    document.myForm.Y.value = dd.obj.y;

	//document.myForm.test.value = document.getElementById("target").id;
	//if (dd.obj.x == document.getElementById("target"))

	var div_x = findElementPosition(document.getElementById("target"), null, false).x;
	var div_y = findElementPosition(document.getElementById("target"), null, false).y;
	
	document.myForm.div_NAME.value = "target";
	document.myForm.div_X.value = div_x;
    document.myForm.div_Y.value = div_y;
	
	if (dd.obj.x >= div_x && dd.obj.x <= div_x + 600 - 250 && dd.obj.y >= div_y && dd.obj.y <= div_y + 300 - 250 )
	{
		alert("bingo!!");
	}

}


function findElementPosition(element, targetParentId, debug) {
	var curleft = curtop = 0;
	if (element.offsetParent) {
		curleft = element.offsetLeft;
		curtop = element.offsetTop;
		if (debug) confirm(element.offsetLeft);
		while (element = element.offsetParent) {
			if (targetParentId && element.id && element.id == targetParentId) {
				break;
		}
		if (debug) confirm(element.offsetLeft);
			curleft += element.offsetLeft;
			curtop += element.offsetTop;
		}
	}
	return {x: curleft, y: curtop};
}



</script>


  
  
  </body>
</html>
